﻿
/*
* Jquery.Selecter (for jQuery)
* version: 0.1 (11/10/2011)
* @requires jQuery v1.6 or later
*
* Licensed under the MIT:
*   http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2011, 2018 TuShuTuan.com [ soft@TuShuTuan.com ]
*
* Author:FZF QQ:1363036
*
* Usage:
*<ul id="selected"></ul>
*<div id="selecter"></div>
*$(document).ready(
*            function() {
*        $('#selecter').selecter();
*            }
*        );
*Description of Parameter
*handler:the api that you get the json data by jquery ajax
*data:the post data of jquery ajax function
*ParentId:the ParentId of the categores you want to get
*
*Format of return value
*the value must be in json format like this follow:
*[{"id":1709,"CategoryName":"毛球修剪器"},{"id":1710,"CategoryName":"挂烫机/干衣机"}]
*
*/
(function ($)
{
    $.fn.selecter = function (options)
    {
        //var InputType = "radio";
        var InputType = "checkbox";
        var defaults = { handler: "/handler/handler.ashx", data: "action=getSiteCategory&id=", ParentId: "0" }
        var options = $.extend(defaults, options);
        this.each(function ()
        {
            var $this = $(this);
            //$("#selected li")


            $.ajax({
                url: defaults.handler,
                dataType: 'json',
                data: defaults.data + defaults.ParentId,
                type: 'POST',
                beforeSend: function ()
                {
                },
                success: function (value)
                {
                    var html = '<ul rel="0">';
                    for (var i = 0; i < value.length; i++)
                    {
                        html += '<li rel="' + value[i]['ID'] + '"><input type="' + InputType + '" value="' + value[i]['ID'] + '" />' + value[i]['CategoryName'] + '</li>';
                    }
                    html += '</ul>';
                    var $me = $(html);
                    $this.append($me);
                    var $items = $this.find('ul:first').find('li');
                    $items.click(
                        function ()
                        {
                            $items.removeClass('current');
                            $(this).addClass('current');
                            method.ajax1($(this).attr('rel'), $this, $me);
                        }
                    );

                    CheckBoxEven($me.find('input'), $("#selected li"));

                },
                error: function ()
                {
                    alert('error');
                }
            });
        });
        /*methods start*/
        var method = {
            ajax1: function (ParentId, $this, $pre)
            {
                $.ajax({
                    url: defaults.handler,
                    dataType: 'json',
                    data: defaults.data + ParentId,
                    type: 'POST',
                    beforeSend: function ()
                    {
                    },
                    success: function (value)
                    {
                        if (value.length == 0) return;

                        var rel = parseInt($pre.attr("rel"));

                        var html = '<ul rel="' + (1 + rel) + '">';

                        for (var i = 0; i < value.length; i++)
                        {
                            html += '<li rel="' + value[i]['ID'] + '"><input type="' + InputType + '" value="' + value[i]['ID'] + '" />' + value[i]['CategoryName'] + '</li>';
                        }
                        html += '</ul>';

                        $this.find('ul:gt(' + rel + ')').remove();
                        var $me = $(html);
                        $this.append($me);
                        var $items = $this.find('ul:gt(' + rel + ')').find('li');

                        $items.click(
                        function ()
                        {
                            $items.removeClass('current');
                            $(this).addClass('current');
                            method.ajax1($(this).attr('rel'), $this, $me);
                        });

                        CheckBoxEven($me.find('input'), $("#selected li"));
                    },
                    error: function ()
                    {
                        alert('error');
                    }
                });

            }
        }
        /*end*/
        CheckBoxEven = function ($cbs, $selectItems)
        {
            $cbs.change(function ()
            {
                var thisId = $(this).attr('value');
                var flag = true;
                var li = $(this).parent();
                var selectedClasses = $("#selected li");
                if (this.checked == false)
                {
                    selectedClasses.each(function ()
                    {
                        if ($(this).attr('rel') == thisId)
                        {
                            $(this).remove();
                        }
                    });
                }
                else
                {
                    selectedClasses.each(function ()
                    {
                        if ($(this).attr('rel') == thisId)
                        {
                            flag = false;
                        }
                    });
                    if (flag)
                    {
                        if (InputType == "checkbox")
                            $("#selected").append(li.clone().addClass('error'));
                        else
                            $("#selected").html(li.clone().addClass('error'));
                    }
                }

                var CategoryIds = new Array();
                $("#selected li").each(function ()
                {
                    CategoryIds.push($(this).attr('rel'));
                });
                $("#HF_Classes").val(CategoryIds.join(","));


                selectedClasses.click(function ()
                {
                    $(this).remove();
                });
                return false;
            });
        }
    };
})(jQuery)